<!-- 班级相册 -->
<script setup lang="ts">
import { useLoadMore } from 'vue-request'
import { fetchPhotosAPI } from '@/apis/fetchPhotos'
import { useUserInfoStore } from '@/store/userInfo'
import { MediaType } from '@/types/enums'

const router = useRouter()
const userInfoStore = useUserInfoStore()

// 班级 id
const classId = ref('')

// 分页列表数据
const { dataList, loading, loadingMore, noMore, loadMore, refresh } = useLoadMore<LoadMoreData<Photo>>(
  fetchNotices,
  { isNoMore: d => d?.list.length === d?.total },
)

// 为图片添加 baseUrl
const displayList = computed(() => {
  return dataList.value.map((item) => {
    return {
      type: item.type,
      image: withDomain(item.image),
      cover: withDomain(item.cover),
    }
  }) as Photo[]
})

// “加载更多”的状态
const loadMoreStatus = computed(() => {
  if (loadingMore.value)
    return 'loading'
  else if (noMore.value)
    return 'nomore'
  else
    return 'loadmore'
})

onLoad((options) => {
  if (options && options.class_id) {
    classId.value = options.class_id
    refresh()
  }
  else { uni.showToast({ title: '页面加载错误：未获取到班级id', icon: 'none' }) }
})
onReachBottom(() => loadMore())

/**
 * @description 分页服务函数
 */
async function fetchNotices(d?: LoadMoreData<Photo>): Promise<LoadMoreData<Photo>> {
  // 缺少必要参数，先不执行
  if (!classId.value) {
    return {
      list: [],
      page: 0,
      total: 0,
    }
  }

  // 当前页数
  const _page = d?.page ? d.page + 1 : 1

  const res = await fetchPhotosAPI({
    id: classId.value,
    page: _page.toString(),
    limit: '10',
  }, userInfoStore.userInfo!.token!)

  return {
    list: res.data?.data.data || [],
    page: _page,
    total: res.data?.data.total || 9999,
  }
}

const currentVideo = ref('')
const isShowVideoPlayer = ref(false)

/**
 * @description 点击图片时触发，大图预览
 */
function handleTapPhoto({ index, media }: { index: string, media: { type: number, image: string, cover: string } }) {
  if (media.type.toString() === MediaType.image) {
    uni.previewImage({
      current: index,
      showmenu: true,
      urls: displayList.value.map(item => item.cover),
      indicator: 'number',
    })
  }
  else {
    currentVideo.value = media.image
    isShowVideoPlayer.value = true
  }
}

/**
 * @description 点击上传图片按钮时触发
 */
function handleUploadPhotos() {
  router.push({
    name: 'verifyPhotos',
    params: { class_id: classId.value },
  })
}
</script>

<template>
  <Spacer height="24" />
  <Waterfall :list="displayList" @tap-photo="e => handleTapPhoto(e)" />
  <!-- 加载更多 -->
  <uv-load-more v-if="dataList.length > 3" :status="loadMoreStatus" @loadmore="loadMore" />
  <Spacer height="80" />
  <button
    class="button-shadow fixed right-0 top-90rpx flex flex-col items-center rounded-20rpx bg-white px-12rpx py-16rpx"
    @tap="handleUploadPhotos"
  >
    <image class="h-45rpx w-55rpx" src="@/static/images/upload.png" />
    <Spacer height="9" />
    <view class="text-24rpx text-#0037AE font-semibold leading-32rpx">
      照片上传
    </view>
  </button>
  <PageDefault v-if="dataList.length === 0">
    暂无照片
  </PageDefault>
  <uv-loading-page :loading="loading && !loadingMore" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />

  <div v-if="isShowVideoPlayer" class="fixed left-0 top-0 z-[100] h-screen w-screen bg-black bg-opacity-40" @tap="isShowVideoPlayer = false">
    <video class="absolute left-1/2 top-1/2 aspect-video -translate-1/2" :src="currentVideo" @tap.stop />
  </div>
</template>

<style scoped>
.button-shadow {
  box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(51,51,51,0.14);
}
</style>

<route lang="yaml">
name: 'photos'
style:
  navigationBarTitleText: '班级相册'
</route>
